<template>
    <div id="app">
            <el-backtop>
                <el-icon class="el-icon-top"></el-icon>
            </el-backtop>
        <Header></Header>
        <router-view v-if="isRouterActive"></router-view>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from './components/Header';
    import Footer from './components/Footer';
    import Vue from 'vue';
    import {Backtop,Icon} from 'element-ui';

    Vue.use(Backtop);
    Vue.use(Icon);
    export default {
        name: 'App',
        data() {
            return {
                isRouterActive:true
            }
        },
        provide(){
            return{
                reload:this.reload
            }
        },
        components: {
            Header,
            Footer
        },
        methods: {
            reload(){
                this.isRouterActive=false;
                this.$nextTick(function(){
                    this.isRouterActive=true;
                })
            }
        }
    }
</script>

<style>
    html,body{
        margin: 0;
        background: #fff;
    }
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #000;
        background: #fff;
    }
    .customeRow{
        width: 1180px;
        margin: 0 auto;
    }
    .nav{
        color: #999;
        text-align: center;
        font-size: 15px;
        padding: 20px 0;
    }
    .nav a{
        text-decoration: none;
        color: #999;
    }
    .title{
        text-align: center;
        font-size: 19px;
        font-weight: bold;
    }
    .customeLine{
        background: #999;
        height: 1px;
        margin-top: 5px;
    }
    .customePadding{
        padding: 0;
    }
    .noData{
        text-align:center
    }
    .noData img{
        height: 80px;
        width: 116px;
    }
    .noData .text{
        font-size: 14px;
        color:#999;
    }
    @media screen and (max-width: 420px){
        .customeLine{
            margin: 5px auto;
        }
        .customeRow{
            width: 100%;
        }
        .noData{
            padding-bottom: 30px;
        }
    }
    @media screen and (min-width: 420px) and (max-width: 1024px){
        .customePadding{
            padding: 0 10px;
        }
    }
    @media screen and (max-width: 1280px){
        .customeRow{
            width: 100%;
        }
    }
</style>
